<template>
  <div class="nav-header">
    <div class="left">
      <div class="icon" v-if="isStow">
        <el-icon :size="24" @click="handStowClick"><Expand /></el-icon>
      </div>
      <div class="icon" v-else>
        <el-icon :size="24" @click="handStowClick"><Fold /></el-icon>
      </div>
    </div>
    <div class="right">
      <navBreadcrumb :breadcrumb-list="breadcrumbLists" />
      <div class="img">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar
              :size="30"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <span class="nickname">{{ nickname }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import navBreadcrumb from '@/components/nav-breadcrumb/nav-breadcrumb.vue'
import { getbreadcrumbList } from '@/utils/map-menu'
import { breadcrumbType } from '@/components/nav-breadcrumb/type/type'

export default defineComponent({
  name: 'nav-header',
  components: {
    navBreadcrumb
  },
  emits: ['changeStow'],
  setup(prop, { emit }) {
    const store = useStore()
    const route = useRoute()
    const isStow = ref(false)
    const nickname = computed(() => {
      return store.state.user.userInfo.name
    })
    const handStowClick = () => {
      isStow.value = !isStow.value
      emit('changeStow', isStow.value)
    }
    //设置面包屑
    const menu = store.state.user.menu
    let currentPath = route.path
    const breadcrumbLists = ref<breadcrumbType[]>([])
    let arr = getbreadcrumbList(menu, currentPath)
    breadcrumbLists.value = arr
    watch(route, () => {
      currentPath = route.path
      arr = getbreadcrumbList(menu, currentPath)
      breadcrumbLists.value = arr
    })

    return {
      isStow,
      handStowClick,
      nickname,
      breadcrumbLists
    }
  }
})
</script>

<style lang="less" scoped>
.nav-header {
  display: flex;
  height: 100%;
  .left {
    .icon {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 100%;
    }
  }
  .right {
    flex: 1;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;

    .img {
      display: flex;
      align-items: center;
      height: 100%;
      .el-dropdown-link {
        display: flex;
        align-items: center;

        .nickname {
          margin-left: 6px;
        }
      }
    }
  }
}
</style>
